<template lang="html">
  <div class="header-title">
    <div class="line"></div>
    <div class="title">
      {{name}}
    </div>
    <div class="line"></div>
  </div>
</template>

<script type="text/ecmascript0-6">

export default {
  name: 'headerTitle',
  props: {
    name: {
      type: String
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">

  .header-title
    display: flex
    width: 80%
    margin: 28px auto 24px auto
    .line
      position: relative
      flex: 1
      top: -7px
      border-bottom: 1px solid rgba(255, 255, 255, .2)
    .title
      padding: 0 12px
      line-height: 14px
      font-size: 14px
      font-weight: 700
      color: #fff
</style>
